<div class="content-section introduction">
    <div class="feature-intro">
        <h1>SplitButton</h1>
        <p>SplitButton groups a set of commands in an overlay with a default command.</p>
    </div>
    <app-demoActions github="splitbutton" stackblitz="splitbutton-demo"></app-demoActions>
</div>

<div class="content-section implementation">
    <p-toast></p-toast>

    <div class="card">
        <h5>Basic</h5>
        <p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('info')" [model]="items"></p-splitButton>

        <h5>Nested</h5>
        <p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('info')" [model]="nestedItems"></p-splitButton>

        <h5>Severities</h5>
        <p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('info')" [model]="items"></p-splitButton>
        <p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('info')" [model]="items" styleClass="p-button-secondary mb-2"></p-splitButton>
        <p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('success')" [model]="items" styleClass="p-button-success mb-2"></p-splitButton>
        <p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('info')" [model]="items" styleClass="p-button-info mb-2"></p-splitButton>
        <p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('warn')" [model]="items" styleClass="p-button-warning mb-2"></p-splitButton>
        <p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('info')" [model]="items" styleClass="p-button-help mb-2"></p-splitButton>
        <p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('error')" [model]="items" styleClass="p-button-danger mb-2"></p-splitButton>

        <h5>Raised Buttons</h5>
        <p-splitButton label="Primary" [model]="items" styleClass="p-button-raised mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Secondary" [model]="items" styleClass="p-button-raised p-button-secondary mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Success" [model]="items" styleClass="p-button-raised p-button-success mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Info" [model]="items" styleClass="p-button-raised p-button-info mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Warning" [model]="items" styleClass="p-button-raised p-button-warning mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Help" [model]="items" styleClass="p-button-raised p-button-help mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Danger" [model]="items" styleClass="p-button-raised p-button-danger mr-2 mb-2"></p-splitButton>

        <h5>Rounded Buttons</h5>
        <p-splitButton label="Primary" [model]="this.items" styleClass="p-button-rounded mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Secondary" [model]="this.items" styleClass="p-button-rounded p-button-secondary mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Success" [model]="this.items" styleClass="p-button-rounded p-button-success mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Info" [model]="this.items" styleClass="p-button-rounded p-button-info mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Warning" [model]="this.items" styleClass="p-button-rounded p-button-warning mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Help" [model]="this.items" styleClass="p-button-rounded p-button-help mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Danger" [model]="this.items" styleClass="p-button-rounded p-button-danger mr-2 mb-2"></p-splitButton>

        <h5>Text Buttons</h5>
        <p-splitButton label="Primary" [model]="this.items" styleClass="p-button-text mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Secondary" [model]="this.items" styleClass="p-button-text p-button-secondary mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Success" [model]="this.items" styleClass="p-button-text p-button-success mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Info" [model]="this.items" styleClass="p-button-text p-button-info mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Warning" [model]="this.items" styleClass="p-button-text p-button-warning mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Help" [model]="this.items" styleClass="p-button-text p-button-help mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Danger" [model]="this.items" styleClass="p-button-text p-button-danger mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Plain" [model]="this.items" styleClass="p-button-text p-button-plain mr-2 mb-2"></p-splitButton>

        <h5>Raised Text Buttons</h5>
        <p-splitButton label="Primary" [model]="this.items" styleClass="p-button-raised p-button-text mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Secondary" [model]="this.items" styleClass="p-button-raised p-button-secondary p-button-text mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Success" [model]="this.items" styleClass="p-button-raised p-button-success p-button-text mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Info" [model]="this.items" styleClass="p-button-raised p-button-info p-button-text mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Warning" [model]="this.items" styleClass="p-button-raised p-button-warning p-button-text mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Help" [model]="this.items" styleClass="p-button-raised p-button-help p-button-text mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Danger" [model]="this.items" styleClass="p-button-raised p-button-danger p-button-text mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Plain" [model]="this.items" styleClass="p-button-raised p-button-plain p-button-text mr-2 mb-2"></p-splitButton>

        <h5>Outlined Buttons</h5>
        <p-splitButton label="Primary" [model]="this.items" styleClass="p-button-outlined mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Secondary" [model]="this.items" styleClass="p-button-outlined p-button-secondary mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Success" [model]="this.items" styleClass="p-button-outlined p-button-success mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Info" [model]="this.items" styleClass="p-button-outlined p-button-info mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Warning" [model]="this.items" styleClass="p-button-outlined p-button-warning mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Help" [model]="this.items" styleClass="p-button-outlined p-button-help mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Danger" [model]="this.items" styleClass="p-button-outlined p-button-danger mr-2 mb-2"></p-splitButton>

        <h5>Sizes</h5>
        <p-splitButton label="Small" [model]="this.items" styleClass="p-button-sm mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Normal" [model]="this.items" styleClass="mr-2 mb-2"></p-splitButton>
        <p-splitButton label="Large" [model]="this.items" styleClass="p-button-lg mr-2 mb-2"></p-splitButton>

        <h5>Templating</h5>
        <p-splitButton label="Normal" styleClass="bg-primary" [model]="this.items">
            <ng-template pTemplate="content">
                <img alt="logo" src="assets/showcase/images/primeng-icon.svg" style="width: 1rem" />
                <span class="ml-2 flex align-items-center font-bold">PrimeNG</span>
            </ng-template>
        </p-splitButton>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
                    <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;SplitButtonModule&#125; from 'primeng/splitbutton';
</app-code>

            <h5>Getting Started</h5>
            <p>SplitButton has a default command button and a collection of menuitems to be displayed in an overlay.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-splitButton label="Save" icon="pi pi-check" (onClick)="save()" [model]="items"&gt;&lt;/p-splitButton&gt;
</app-code>

            <h5>Animation Configuration</h5>
            <p>Transition of the open and hide animations can be customized using the <i>showTransitionOptions</i> and <i>hideTransitionOptions</i> properties,
                example below disables the animations altogether.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-splitButton [showTransitionOptions]="'0ms'" [hideTransitionOptions]="'0ms'" label="Save" icon="pi pi-check" (onClick)="save()" [model]="items"&gt;&lt;/p-splitButton&gt;
</app-code>
            <h5>MenuModel API</h5>
            <p>SplitButton uses the common menumodel api to define its items, visit <a [routerLink]="['/menumodel']">MenuModel API</a> for details.</p>

            <h5>Properties</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>label</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Text of the button.</td>
                        </tr>
                        <tr>
                            <td>icon</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Name of the icon.</td>
                        </tr>
                        <tr>
                            <td>iconPos</td>
                            <td>string</td>
                            <td>left</td>
                            <td>Position of the icon, valid values are "left" and "right".</td>
                        </tr>
                        <tr>
                            <td>style</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the component.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the component.</td>
                        </tr>
                        <tr>
                            <td>menuStyle</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the overlay menu.</td>
                        </tr>
                        <tr>
                            <td>menuStyleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the overlay menu.</td>
                        </tr>
                        <tr>
                            <td>appendTo</td>
                            <td>any</td>
                            <td>null</td>
                            <td>Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).</td>
                        </tr>
                        <tr>
                            <td>disabled</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When present, it specifies that the component should be disabled.</td>
                        </tr>
                        <tr>
                            <td>tabindex</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Index of the element in tabbing order.</td>
                        </tr>
                        <tr>
                            <td>dir</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Indicates the direction of the element.</td>
                        </tr>
                        <tr>
                            <td>showTransitionOptions</td>
                            <td>string</td>
                            <td>225ms ease-out</td>
                            <td>Transition options of the show animation.</td>
                        </tr>
                        <tr>
                            <td>hideTransitionOptions</td>
                            <td>string</td>
                            <td>195ms ease-in</td>
                            <td>Transition options of the hide animation.</td>
                        </tr>
                        <tr>
                            <td>expandAriaLabel</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Defines a string that labels the expand button for accessibility.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Events</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>onClick</td>
                            <td>event: browser event<br></td>
                            <td>Callback to invoke when default command button is clicked.</td>
                        </tr>
                        <tr>
                            <td>onDropdownClick</td>
                            <td>event: browser event<br></td>
                            <td>Callback to invoke when dropdown button is clicked.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
          <h5>Severity</h5>
          <p>Different color options are available to define severity levels.</p>

          <ul>
            <li>.p-button-secondary</li>
            <li>.p-button-success</li>
            <li>.p-button-info</li>
            <li>.p-button-warning</li>
            <li>.p-button-help</li>
            <li>.p-button-danger</li>
          </ul>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-splitButton label="Save" icon="pi pi-check" [model]="items" styleClass="p-button-warning"&gt;&lt;/p-splitButton&gt;
</app-code>
          <h5>Raised and Rounded Buttons</h5>
          <p>SplitButton can be raised by having "p-button-raised" style class and similarly borders can be made rounded using "p-button-rounded" class.</p>


<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-splitButton label="Save" icon="pi pi-check" [model]="items" styleClass="p-button-raised p-button-rounded"&gt;&lt;/p-splitButton&gt;
</app-code>
            <h5>Styling</h5>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>. SplitButton uses
            button and menu components internally, refer to their documentation for the detailed style list.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>p-splitbutton</td>
                            <td>Container element.</td>
                        </tr>
                        <tr>
                            <td>p-splitbutton-menubutton</td>
                            <td>Dropdown button.</td>
                        </tr>
                        <tr>
                            <td>p-menu</td>
                            <td>Overlay menu.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Templates</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>content</td>
                            <td>-</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Dependencies</h5>
            <p>None.</p>
        </p-tabPanel>
        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/splitbutton" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-splitbutton-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-toast [style]="&#123;marginTop: '80px'&#125;"&gt;&lt;/p-toast&gt;
&lt;h5&gt;Basic&lt;/h5&gt;
&lt;p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('info')" [model]="items"&gt;&lt;/p-splitButton&gt;

&lt;h5&gt;Nested&lt;/h5&gt;
&lt;p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('info')" [model]="nestedItems"&gt;&lt;/p-splitButton&gt;

&lt;h5&gt;Severities&lt;/h5&gt;
&lt;p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('info')" [model]="items"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('info')" [model]="items" styleClass="p-button-secondary mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('success')" [model]="items" styleClass="p-button-success mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('info')" [model]="items" styleClass="p-button-info mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('warn')" [model]="items" styleClass="p-button-warning mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('info')" [model]="items" styleClass="p-button-help mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('error')" [model]="items" styleClass="p-button-danger mb-2"&gt;&lt;/p-splitButton&gt;

&lt;h5&gt;Raised Buttons&lt;/h5&gt;
&lt;p-splitButton label="Primary" [model]="items" styleClass="p-button-raised mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Secondary" [model]="items" styleClass="p-button-raised p-button-secondary mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Success" [model]="items" styleClass="p-button-raised p-button-success mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Info" [model]="items" styleClass="p-button-raised p-button-info mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Warning" [model]="items" styleClass="p-button-raised p-button-warning mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Help" [model]="items" styleClass="p-button-raised p-button-help mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Danger" [model]="items" styleClass="p-button-raised p-button-danger mr-2 mb-2"&gt;&lt;/p-splitButton&gt;

&lt;h5&gt;Rounded Buttons&lt;/h5&gt;
&lt;p-splitButton label="Primary" [model]="this.items" styleClass="p-button-rounded mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Secondary" [model]="this.items" styleClass="p-button-rounded p-button-secondary mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Success" [model]="this.items" styleClass="p-button-rounded p-button-success mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Info" [model]="this.items" styleClass="p-button-rounded p-button-info mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Warning" [model]="this.items" styleClass="p-button-rounded p-button-warning mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Help" [model]="this.items" styleClass="p-button-rounded p-button-help mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Danger" [model]="this.items" styleClass="p-button-rounded p-button-danger mr-2 mb-2"&gt;&lt;/p-splitButton&gt;

&lt;h5&gt;Text Buttons&lt;/h5&gt;
&lt;p-splitButton label="Primary" [model]="this.items" styleClass="p-button-text mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Secondary" [model]="this.items" styleClass="p-button-text p-button-secondary mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Success" [model]="this.items" styleClass="p-button-text p-button-success mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Info" [model]="this.items" styleClass="p-button-text p-button-info mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Warning" [model]="this.items" styleClass="p-button-text p-button-warning mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Help" [model]="this.items" styleClass="p-button-text p-button-help mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Danger" [model]="this.items" styleClass="p-button-text p-button-danger mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Plain" [model]="this.items" styleClass="p-button-text p-button-plain mr-2 mb-2"&gt;&lt;/p-splitButton&gt;

&lt;h5&gt;Raised Text Buttons&lt;/h5&gt;
&lt;p-splitButton label="Primary" [model]="this.items" styleClass="p-button-raised p-button-text mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Secondary" [model]="this.items" styleClass="p-button-raised p-button-secondary p-button-text mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Success" [model]="this.items" styleClass="p-button-raised p-button-success p-button-text mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Info" [model]="this.items" styleClass="p-button-raised p-button-info p-button-text mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Warning" [model]="this.items" styleClass="p-button-raised p-button-warning p-button-text mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Help" [model]="this.items" styleClass="p-button-raised p-button-help p-button-text mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Danger" [model]="this.items" styleClass="p-button-raised p-button-danger p-button-text mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Plain" [model]="this.items" styleClass="p-button-raised p-button-plain p-button-text mr-2 mb-2"&gt;&lt;/p-splitButton&gt;

&lt;h5&gt;Outlined Buttons&lt;/h5&gt;
&lt;p-splitButton label="Primary" [model]="this.items" styleClass="p-button-outlined mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Secondary" [model]="this.items" styleClass="p-button-outlined p-button-secondary mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Success" [model]="this.items" styleClass="p-button-outlined p-button-success mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Info" [model]="this.items" styleClass="p-button-outlined p-button-info mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Warning" [model]="this.items" styleClass="p-button-outlined p-button-warning mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Help" [model]="this.items" styleClass="p-button-outlined p-button-help mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Danger" [model]="this.items" styleClass="p-button-outlined p-button-danger mr-2 mb-2"&gt;&lt;/p-splitButton&gt;

&lt;h5&gt;Sizes&lt;/h5&gt;
&lt;p-splitButton label="Small" [model]="this.items" styleClass="p-button-sm mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Normal" [model]="this.items" styleClass="mr-2 mb-2"&gt;&lt;/p-splitButton&gt;
&lt;p-splitButton label="Large" [model]="this.items" styleClass="p-button-lg mr-2 mb-2"&gt;&lt;/p-splitButton&gt;

&lt;h5&gt;Templating&lt;/h5&gt;
&lt;p-splitButton label="Normal" styleClass="bg-primary" [model]="this.items"&gt;
    &lt;ng-template pTemplate="content"&gt;
        &lt;img alt="logo" src="assets/showcase/images/primeng-icon.svg" style="width: 1rem" /&gt;
        &lt;span class="ml-2 flex align-items-center font-bold"&gt;PrimeNG&lt;/span&gt;
    &lt;/ng-template&gt;
&lt;/p-splitButton&gt;
</app-code>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class SplitButtonDemo implements OnInit &#123;

    items: MenuItem[];

    constructor(private messageService: MessageService) &#123;&#125;

    ngOnInit() &#123;
        this.items = [
            &#123;label: 'Update', icon: 'pi pi-refresh', command: () => &#123;
                this.update();
            &#125;,
            &#123;label: 'Delete', icon: 'pi pi-times', command: () => &#123;
                this.delete();
            &#125;,
            &#123;label: 'Angular.io', icon: 'pi pi-info', url: 'http://angular.io'&#125;,
            &#123;separator: true&#125;,
            &#123;label: 'Setup', icon: 'pi pi-cog', routerLink: ['/setup']&#125;
        ];

        this.nestedItems = [
            &#123;
                label:'File',
                icon:'pi pi-fw pi-file',
                items:[
                    &#123;
                        label:'New',
                        icon:'pi pi-fw pi-plus',
                        items:[
                            &#123;
                                label:'Bookmark',
                                icon:'pi pi-fw pi-bookmark'
                            &#125;,
                            &#123;
                                label:'Video',
                                icon:'pi pi-fw pi-video'
                            &#125;,
                        ]
                    &#125;,
                    &#123;
                        label:'Delete',
                        icon:'pi pi-fw pi-trash'
                    &#125;,
                    &#123;
                        separator:true
                    &#125;,
                    &#123;
                        label:'Export',
                        icon:'pi pi-fw pi-external-link'
                    &#125;
                ]
            &#125;,
            &#123;
                label:'Edit',
                icon:'pi pi-fw pi-pencil',
                items:[
                    &#123;
                        label:'Left',
                        icon:'pi pi-fw pi-align-left'
                    &#125;,
                    &#123;
                        label:'Right',
                        icon:'pi pi-fw pi-align-right'
                    &#125;,
                    &#123;
                        label:'Center',
                        icon:'pi pi-fw pi-align-center'
                    &#125;,
                    &#123;
                        label:'Justify',
                        icon:'pi pi-fw pi-align-justify'
                    &#125;
                ]
            &#125;,
            &#123;
                label:'Users',
                icon:'pi pi-fw pi-user',
                items:[
                    &#123;
                        label:'New',
                        icon:'pi pi-fw pi-user-plus'
                    &#125;,
                    &#123;
                        label:'Delete',
                        icon:'pi pi-fw pi-user-minus'
                    &#125;,
                    &#123;
                        label:'Search',
                        icon:'pi pi-fw pi-users',
                        items:[
                            &#123;
                                label:'Filter',
                                icon:'pi pi-fw pi-filter',
                                items:[
                                    &#123;
                                        label:'Print',
                                        icon:'pi pi-fw pi-print'
                                    &#125;
                                ]
                            &#125;,
                            &#123;
                                icon:'pi pi-fw pi-bars',
                                label:'List'
                            &#125;
                        ]
                    &#125;
                ]
            &#125;,
            &#123;
                label:'Events',
                icon:'pi pi-fw pi-calendar',
                items:[
                    &#123;
                        label:'Edit',
                        icon:'pi pi-fw pi-pencil',
                        items:[
                            &#123;
                                label:'Save',
                                icon:'pi pi-fw pi-calendar-plus'
                            &#125;,
                            &#123;
                                label:'Delete',
                                icon:'pi pi-fw pi-calendar-minus'
                            &#125;
                        ]
                    &#125;,
                    &#123;
                        label:'Archieve',
                        icon:'pi pi-fw pi-calendar-times',
                        items:[
                            &#123;
                                label:'Remove',
                                icon:'pi pi-fw pi-calendar-minus'
                            &#125;
                        ]
                    &#125;
                ]
            &#125;,
            &#123;
                separator:true
            &#125;,
            &#123;
                label:'Quit',
                icon:'pi pi-fw pi-power-off'
            &#125;
        ];
    &#125;

    save(severity: string) &#123;
        this.messageService.add(&#123;severity:severity, summary:'Success', detail:'Data Saved'&#125;);
    &#125;

    update() &#123;
        this.messageService.add(&#123;severity:'success', summary:'Success', detail:'Data Updated'&#125;);
    &#125;

    delete() &#123;
        this.messageService.add(&#123;severity:'success', summary:'Success', detail:'Data Deleted'&#125;);
    &#125;
&#125;
</app-code>
        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-splitbutton-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
     </p-tabView >
</div>
